<template>
  <div class="app-container" style="background-color: rgb(255,255,255)">
    <div class="header_top">
      <div class="topcont">
        <div class="topleft">
            <span class="pic">
                <img style="width: 100%" src="../../../assets/img/resources/pic_notice.png" alt="通知公告">
            </span>
        </div>
      </div>
    </div>
    <div class="pagecontent">

      <div class="cont_left">
        <div class="text_title">
          {{form.title}}
        </div>
        <div class="text_from">
          <div class="f_left">
            <span>文章来源：{{form.source}}</span><span>发布时间：{{form.createTime}}</span>
          </div>
          <div class="share" style="font-size: 11px; float: right;">
          </div>
        </div>
        <div class="text_box" v-html="form.content">

        </div>
        <div>
          <ul class="share_ul">
          </ul>
        </div>

        <div style="clear:both; font-size: 12px; line-height: 24px; font-family:'宋体'">
          <span>*本站部分内容转载自其他媒体，版权归其所有。如若内容或图片侵犯您的权益，请与本站联系，我们将在24小时内处理完毕。</span>
        </div>
      </div>
    </div>
    <div class="pagecontent">
      <div class="cont_left">
        <div class="text_title">
          评论
        </div>
        <div class="text_from">
          <span style="font-size: 14px">用户留言：</span>
          <div class="f_left">
            <el-input style="float: left;width: 90%" type="textarea" :rows="2" placeholder="请输入内容" v-model="comment.userMessage">
            </el-input>
          </div>
          <div class="share" style="font-size: 14px;text-align: center;width: 98px; float: right;">
            <el-button type="primary" @click="addComment">发表</el-button>
          </div>
        </div>
        <div class="text_box" v-for="(item,index) in commentData" :key="index">
          <div class="user_message">
            <div class="user_message_left">
              <div class="user_message_left_top">
                <div class="user_message_left_top_left">
                  <img v-if="item.avatarUrl" style="width: 40px;height: 40px; border-radius: 50%;margin-left: 6px" :src="item.avatarUrl" :alt="item.userName">
                  <img v-else style="width: 40px;height: 40px; border-radius: 50%;margin-left: 6px" src="../../../assets/img/profile.jpg" :alt="item.userName">
                </div>
                <div class="user_message_left_top_right">
                  <div style="font-size: 14px;color: #61666d;margin-bottom: 10px">
                    <span>{{item.userName}}</span>
                  </div>
                  <div class="user_message_left_top_right_top">
                    <span>{{item.userMessage}}</span>
                  </div>
                  <div class="user_message_left_top_right_bottom">
                    <span>{{item.createTime}}</span>
                  </div>
                  <div style="float: right;" v-if="userId==item.userId">
                    <el-button type="danger" @click="removeComment(item.id)">删除</el-button>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
        <div class="page">
          <pagination
            v-show="total>0"
            :total="total"
            :page-sizes="[10,20, 40, 60,100]"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAntiFraudArticles } from "@/api/resources/antiFraudArticles.js";
import { getUserMessageList,addUserMessage,delUserMessage } from "@/api/resources/common.js";
import { getTokenKey } from '@/request/token.js'
export default {
  name: "Info",
  data() {
    return {
      // 表单参数
      form: {},
      antiId:'',
      comment:{},
      commentData:[],
      userId:'',
      total:0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        antiId: this.$route.query.id
      },
    };
  },
  created() {
    this.antiId = this.$route.query.id;
    this.handleGetInfo();
    this.getList();
  },
  methods: {
    /** 修改按钮操作 */
    handleGetInfo() {
      const antiFraudId = this.antiId
      getAntiFraudArticles(antiFraudId).then(response => {
        this.form = response.data;
        this.open = true;
      });
      this.userId = getTokenKey('USER_ID')
    },
    getList(){
      getUserMessageList(this.addDateRange(this.queryParams)).then(response => {
        this.commentData = response.rows;
        this.total = response.total;
      });
    },
    addComment(){
      if (this.comment.userMessage==null || this.comment.userMessage==''){
        this.$message({
          message: '请输入用户留言',
          type: 'warning'
        });
        return
      }
      let data = {
        userMessage:this.comment.userMessage,
        antiId:this.antiId
      }
      addUserMessage(data).then(res =>{
        this.$message({
          message: '发表评论成功',
          type: 'success'
        });
        this.handleGetInfo()
        this.getList()
        this.comment = {}
      })
    },
    removeComment(id){
      const userMessageIds = id
      this.$confirm('是否确认删除用户留言的数据项？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return delUserMessage(userMessageIds);
      }).then(() => {
        this.handleGetInfo();
        this.getList()
        this.$message({
          message: '发表评论成功',
          type: 'success'
        });
      }).catch(() => {});
    },
  }
};
</script>
<style scoped>
.header_top {
  width: 1519px;
  padding: 19px 0 5px;
  background: url(../../../assets/img/resources/top_bg.jpg) no-repeat top center;
  overflow: hidden;
}
.header_top .topcont, .pagecontent {
  width: 980px;
  margin: 0 auto;
}
.header_top .topleft {
  float: left;
  height: 34px;
}
.pagecontent {
  padding-bottom: 20px;
  overflow: hidden;
}
@media screen and (min-width: 980px)
.header_top .topcont, .pagecontent {
  width: 980px;
  margin: 0px auto;
}
.cont_left {
  border-top: #829ca8 1px solid;
}
@media screen and (min-width: 980px)
.cont_left {
  width: 670px;
}
.text_title {
  font-size: 24px;
  line-height: 28px;
  color: #000;
  font-weight: bold;
  padding: 15px 0px;
}
.text_from {
  width: 100%;
  height: 100%;
  font-size: 12px;
  line-height: 28px;
  color: #666;
  padding: 5px 0px;
  margin: 0px auto;
  z-index: 2;
  overflow: hidden;
  border-bottom: #ddd 1px solid;
}
.text_from span {
  padding-right: 20px;
}
.share {
  display: block;
  height: 20px;
  padding: 10px 0px;
  font-size: 12px;
  text-align: left;
}
.text_box {
  width: 100%;
  padding: 10px 0px 20px;
  line-height: 30px;
  border-bottom: #829ca8 1px solid;
  overflow: hidden;
}
.text_box p {
  text-indent: 2em;
  margin: 0;
}
ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}
ol, ul {
  list-style: none;
}
.user_message_left_top{
  display: flex;
  justify-content: left;
}
.user_message_left_top_left{
  display: inline-block;
  margin: 3px 1px; /* 设置盒子之间的间距 */
}
.user_message_left_top_right{
  display: inline-block;
  margin: 10px 16px; /* 设置盒子之间的间距 */
  width: 100%;
}
.user_message_left_top_right_top{
  font-size: 14px;
  line-height: 28px;

}
.user_message_left_top_right_bottom{
  font-size: 12px;
  line-height: 28px;
  color: #9499A0;

}
</style>
